<template>
    <div class="setting-page">
        <h4>{{item ? item.title : ''}}</h4>

        <div v-if="item&&item.type=='text'">
            <el-form ref="form" label-width="100px" class="demo-form">
                <el-form-item label="字体大小" prop="size">
                    <el-radio-group v-model="item.setting.size" size="small">
                        <el-radio-button v-for="item in size" :label="item.value">{{item.name}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="对齐方式" prop="align">
                    <el-radio-group v-model="item.setting.align" size="small">
                        <el-radio-button v-for="item in align" :label="item.value">{{item.name}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>


                <el-form-item label="文案内容" prop="size">
                    <el-input type="textarea" v-model="item.content"></el-input>
                </el-form-item>
                <span>请在文案内容中加入 “ ${aaa} ”代替实际的信息</span>
            </el-form>
        </div>

        <div v-if="item&&item.type=='img'">
            <el-form ref="form" label-width="100px" class="demo-form">
                <el-form-item label="图片大小" prop="size">
                    <el-radio-group v-model="item.setting.size" size="small">
                        <el-radio-button v-for="item in size" :label="item.value">{{item.name}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="对齐方式" prop="align">
                    <el-radio-group v-model="item.setting.align" size="small">
                        <el-radio-button v-for="item in align" :label="item.value">{{item.name}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>

        <div v-if="item&&item.type=='input'">
            <el-form ref="form" label-width="100px" class="demo-form">
                <el-form-item label="图片大小" prop="size">
                    <el-radio-group v-model="item.setting.size" size="small">
                        <el-radio-button v-for="item in size" :label="item.value">{{item.name}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="对齐方式" prop="align">
                    <el-radio-group v-model="item.setting.align" size="small">
                        <el-radio-button v-for="item in align" :label="item.value">{{item.name}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="文案内容" prop="size">
                    <el-input type="textarea" v-model="item.content"></el-input>
                </el-form-item>
            </el-form>
        </div>

  <!--      <el-form>
            <el-form-item label-width="100px">
                <el-button type="danger" @click="del">删除</el-button>
            </el-form-item>
        </el-form>-->
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        data() {
            return {
                size: [
                    {
                        name: '小',
                        value: 'small'
                    }, {
                        name: '中',
                        value: 'medium'
                    }, {
                        name: '大',
                        value: 'large'
                    }
                ],
                align: [
                    {
                        name: '居左',
                        value: 'left'
                    }, {
                        name: '居中',
                        value: 'center'
                    }, {
                        name: '居右',
                        value: 'right'
                    }
                ],
            };
        },
        props: ['item'],
        methods: {
            del(){

            }
        }
    }

</script>


<style scoped lang="scss">
    .setting-page {
        padding: 15px;
    }
</style>
